<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>个人账户中心</title>
    <link rel="stylesheet" href="../../assets/css/bootstrap.min.css"/>
    <link rel="stylesheet" href="../../assets/font-awesome/4.5.0/css/font-awesome.min.css"/>
    <link rel="stylesheet" href="../../assets/css/ace.min.css" class="ace-main-stylesheet" id="main-ace-style"/>
    <link rel="stylesheet" href="../../assets/css/jquery-ui.min.css"/>
    <link rel="stylesheet" href="../../assets/css/login/member.css">
    <link rel="stylesheet" href="../../assets/css/manager.css">
</head>
<style>

</style>
<body>
<div class="head">
    <div class="header">
        <div class="header-cnt fn-clear">
            <h1 class="logo">
                <a href="" class="logo-img logo-img-jx" title="激想云商零售管理">
                    激想云商零售管理
                </a>
            </h1>
            <h2 class="logo-title">
                个人账户信息
            </h2>
        </div>
    </div>
</div>
<div class="container">
    <div class="content">
        <div class="maincenter">
            <div class="left_div">
                <div class="jx-profile-activity">
                    <img class="user" alt="Alex Doe's avatar"
                         src="../../assets/images/avatars/avatar5.png">
                    <p class="username">陈晨</p>
                </div>
                <div class=" sidebar-nav">
                    <ul class="nav" id="tabNav">
                        <li class="active">
                            <a href="#" id="#info">
                                <span class="nav-title">个人信息</span>
                            </a>
                        </li>
                        <li>
                            <a href="#" id="#pwd">
                                <span class="nav-title">账号密码</span>
                            </a>
                        </li>
                    </ul>
                </div>
            </div>

            <div class="right_div">
                <div id="info" class="tab_panel">
                    <div class="item">
                        <div class="maincenter-box-tip dashed">
                            <p class="ui-tiptext ui-tiptext-message">
                                个人信息
                            </p>
                        </div>
                        <form class="ui-form" id="accountForm" method="post" action="" novalidate="novalidate">
                            <fieldset>
                                <div class="ui-form-item jx-profile-activity" style="line-height: 50px">
                                    <label class="ui-label">头像</label>
                                    <img class="user" alt="Alex Doe's avatar"
                                         src="../../assets/images/avatars/avatar5.png">
                                    <button type="button" id="changeAvatar"
                                            class="btn btn-white btn-inverse btn-sm btn-round">更换头像
                                    </button>
                                </div>
                                <div class="ui-form-item">
                                    <label class="ui-label">姓名</label>
                                    <input type="text" id="userName" name="userName" class="ui-input i-text"
                                           autocomplete="off"
                                           value="陈晨" placeholder="请输入姓名">
                                    <div class="ui-form-explain"><i class="fa fa-times-circle ui-form-icon"
                                                                    aria-hidden="true"></i><span></span>
                                    </div>
                                </div>
                                <div class="ui-form-item">
                                    <label class="ui-label">姓名</label>
                                    <input class="ui-radio" type="radio" id="male" name="gender" value="m"
                                           checked="checked"
                                           seed="JCompleteForm-male" smartracker="on">
                                    <label for="male">男</label>
                                    <input class="ui-radio" type="radio" id="female" name="gender" value="f"
                                           seed="JCompleteForm-female" smartracker="on">
                                    <label for="female">女</label>
                                    <div class="ui-form-explain"><i class="fa fa-times-circle ui-form-icon"
                                                                    aria-hidden="true"></i><span></span>
                                    </div>
                                </div>
                                <div class="dashed"></div>
                                <div class="ui-form-item ui-form-item-last">
                                    <div class="ui-button ui-button-morange">
                                        <input type="submit" value="保存" class="ui-button-text">
                                    </div>
                                </div>
                            </fieldset>
                        </form>

                    </div>

                </div>
                <div id="pwd" class="tab_panel" style="display: none;">
                    <div class="item">
                        <div class="maincenter-box-tip dashed">
                            <p class="ui-tiptext ui-tiptext-message">
                                登录账号
                            <p class="ft-12 grey line-height-200">所有登录账号都可用于登录，主邮箱账号可收取通知</p>
                            </p>
                        </div>
                        <div>邮箱账号：<span>未绑定</span>
                            <button id="bindEmail" type="button"
                                    class="ml-10 btn btn-white btn-sm btn-orange btn-round">添加邮箱
                            </button>
                        </div>
                        <div class="dashed"></div>
                        <div>手机账号：未绑定
                            <button id="bindPhone" type="button"
                                    class="ml-10 btn btn-white btn-sm btn-orange btn-round">添加手机
                            </button>
                        </div>
                    </div>
                    <div class="item">
                        <div class="maincenter-box-tip dashed">
                            <p class="ui-tiptext ui-tiptext-message">
                                密码管理
                            </p>
                        </div>
                        <form class="form-horizontal ui-form" id="pwdForm" novalidate="novalidate">
                            <div class="ui-form-item">
                                <label class="ui-label ui-label-reset">初始密码</label>
                                <input type="password" id="primaryPassword" name="primaryPassword"
                                       class="ui-input i-text"
                                       oncontextmenu="return false" onpaste="return false" oncopy="return false"
                                       oncut="return false" autocomplete="off" value="" placeholder="请输入密码">
                                <div class="ui-form-explain"><i class="fa fa-times-circle ui-form-icon"
                                                                aria-hidden="true"></i><span></span>
                                </div>
                            </div>
                            <div class="ui-form-item">
                                <label class="ui-label">新登录密码</label>
                                <input type="password" id="password_input" name="password" class="ui-input i-text"
                                       oncontextmenu="return false" onpaste="return false" oncopy="return false"
                                       oncut="return false" autocomplete="off" value="" placeholder="请输入密码">
                                <div class="ui-form-explain"><i class="fa fa-times-circle ui-form-icon"
                                                                aria-hidden="true"></i><span>必须是8-20位英文字母、数字或符号，不能是纯数字</span>
                                </div>
                            </div>
                            <div class="ui-form-item">
                                <label class="ui-label">确认新登录密码</label>
                                <input type="password" id="rePassword_input" name="rePassword" class="ui-input i-text"
                                       oncontextmenu="return false" onpaste="return false" oncopy="return false"
                                       oncut="return false" autocomplete="off" value="" placeholder="请重复输入密码">
                                <div class="ui-form-explain"><i class="fa fa-times-circle ui-form-icon"
                                                                aria-hidden="true"></i><span></span>
                                </div>
                            </div>
                            <div class="ui-form-item ui-form-item-last">
                                <div class="ui-button ui-button-morange" id="J-submit-btn">
                                    <input type="submit" id="submit-btn" value="保存密码" class="ui-button-text btn-next">
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="footer">
    <div class="footer-inner">
        <div class="footer-content">
            沪ICP备15052275号-2
        </div>
    </div>
</div>
<div id="avatarDialog" title="更改头像" class="dialog-init">
    <div class="avatar-container">
        <div class="imageBox">
            <div class="thumbBox"></div>
            <div class="spinner" style="display: none"></div>
        </div>
        <div class="action">
            <div class="new-contentarea tc">
                <a href="javascript:void(0)" class="upload-img">
                    <label for="upload-file">请先选择图片...</label>
                </a>
                <input type="file" class="" name="upload-file" id="upload-file"/>
            </div>
            <input type="button" id="btnCrop" class="Btnsty_peyton" value="预览">
            <input type="button" id="btnZoomIn" class="Btnsty_peyton" value="+">
            <input type="button" id="btnZoomOut" class="Btnsty_peyton" value="-">
        </div>
        <div class="cropped"></div>
    </div>
</div>
<!--绑定手机-->
<div id="bindPhoneDialog" title="绑定手机" class="dialog-init">
    <form class="form-horizontal ui-form" id="phoneForm" novalidate="novalidate">
        <div class="ui-form-item">
            <label class="ui-label">手机号</label>
            <input id="" name="phone" class="ui-input" type="text" placeholder="请输入手机号" value="" autocomplete="off">
            <div class="ui-form-explain"><i class="fa fa-times-circle ui-form-icon" aria-hidden="true"></i>
            </div>
        </div>
        <div class="ui-form-item item-middle">
            <label class="ui-label">校验码</label>
            <input id="J-checkcode" name="checkCode" class="ui-input ui-input-checkcode first-elem" type="text"
                   autocomplete="off" maxlength="4">
            <div class="ui-form-explain"><i class="fa fa-times-circle ui-form-icon" aria-hidden="true"></i>
            </div>
            <button type="button" class="jx-btn"> 获取校验码</button>
        </div>
    </form>
</div>
<!--绑定手机-->
<div id="bindEmailDialog" title="绑定邮箱" class="dialog-init">
    <form class="form-horizontal ui-form" id="emailForm" novalidate="novalidate">
        <div class="ui-form-item">
            <label class="ui-label">邮箱</label>
            <input id="" name="email" class="ui-input" type="text" placeholder="请输入邮箱" value="" autocomplete="off">
            <div class="ui-form-explain"><i class="fa fa-times-circle ui-form-icon" aria-hidden="true"></i>
            </div>
        </div>
        <div class="ui-form-item">
            <label for="J-checkcode1" class="ui-label">验证码</label>
            <input id="J-checkcode1" name="picCheckCode" class="ui-input ui-input-checkcode" type="text"
                   autocomplete="off" maxlength="4">
            <div class="ui-form-explain"><i class="fa fa-times-circle ui-form-icon"
                                            aria-hidden="true"></i>
            </div>
            <img title="点击图片刷新验证码" class="ui-input-checkcode-img J-changeCheckcode" complete="complete"
                 src="../../assets/images/code.png" alt="输入验证码" style="cursor:pointer;">
            <a href="javascript:;" target="_blank" class="ui-form-other J-changeCheckcode"
               id="J-forgetAccount">看不清？换一张</a>
        </div>
    </form>
</div>
<!--[if !IE]> -->
<script src="../../assets/js/jquery-2.1.4.min.js"></script>
<!-- <![endif]-->
<!--[if IE]>
<script src="../../assets/js/jquery-1.11.3.min.js"></script>
<![endif]-->
<script src="../../assets/js/jquery.validate.min.js"></script>
<script src="../../assets/js/jquery-ui.min.js"></script>
<!--avatar upload-->
<script src="../../assets/js/cropbox.js"></script>
</body>
<script type="text/javascript">
    $(function () {
        //点击切换tab
        $("#tabNav a").click(function () {
            $(this).parent().addClass("active").siblings().removeClass("active");
            var id = $(this).attr("id");
            $(id).css("display", "inline-block").siblings().css("display", "none");
        });
        $("#bindPhone").click(function () {
            $("#bindPhoneDialog").dialog('open');
        });
        //添加验证手机方法
        jQuery.validator.addMethod("isMobile", function (value, element) {
            var length = value.length;
            var mobile = /^(((13[0-9]{1})|(15[0-9]{1}))+\d{8})$/;
            return this.optional(element) || (length == 11 && mobile.test(value));
        }, "请正确填写您的手机号码");
        //表单验证
        var phone = $("#phoneForm").validate({
            /*onkeyup: function (element, event) {
                //去除左侧空格
                var value = this.elementValue(element).replace(/^\s+/g, "");
                $(element).val(value);
            },*/
            onfocusout: function (element, event) {
                var value = this.elementValue(element).replace(/\s|\xA0/g,"");
                $(element).val(value);
            },
            errorPlacement: function (error, element) {
                error.insertAfter(element.next().find("i"));
            },
            rules: {
                phone: {
                    required: true,
                    isMobile: true
                },
                checkCode: {
                    required: true,
                    minlength: 4
                }
            },
            messages: {
                phone: {
                    required: "请输入手机号",
                    isMobile: "请填写正确手机号"
                },
                checkCode: {
                    required: "请输入验证码",
                    minlength: "验证码长度为4位"
                }
            },
            highlight: function (e) {
                $(e).closest('.ui-form-item').addClass('ui-form-item-error');
            },
            success: function (e) {
                $(e).closest('.ui-form-item').removeClass('ui-form-item-error');
            },
            submitHandler: function (form) {
                phone.resetForm();
                form.reset();
            },
            invalidHandler: function (form) {
            }
        });
        $("#bindPhoneDialog").dialog({
            autoOpen: false,
            modal: true,
            dialogClass: "J-dialog",
            width: 600,
            height: "auto",
            buttons: [
                {
                    html: "取消",
                    "class": "btn  btn-white   btn-round btn-minier",
                    click: function (e) {
                        $("#bindPhoneDialog").dialog('close');
                    }
                },
                {
                    html: "确定",
                    "class": "btn btn-orange btn-round btn-minier",
                    click: function (e) {
                        if (!$('#phoneForm').valid()) {
                            e.preventDefault();
                        } else {
                            $("#phoneForm").submit();
                            $("#bindPhoneDialog").dialog('close');
                        }
                    }
                }
            ]
        });
        $("#bindEmail").click(function () {
            $("#bindEmailDialog").dialog('open');
        });
        //表单验证
        var email = $("#emailForm").validate({
            /*onkeyup: function (element, event) {
                //去除左侧空格
                var value = this.elementValue(element).replace(/^\s+/g, "");
                $(element).val(value);
            },*/
            onfocusout: function (element, event) {
                var value = this.elementValue(element).replace(/\s|\xA0/g,"");
                $(element).val(value);
            },
            errorPlacement: function (error, element) {
                error.insertAfter(element.next().find("i"));
            },
            rules: {
                email: {
                    required: true,
                    email: true
                },
                picCheckCode: {
                    required: true,
                    minlength: 4
                }
            },
            messages: {
                email: {
                    required: "请输入邮箱",
                    email: "请填写正确邮箱格式"
                },
                picCheckCode: {
                    required: "请输入验证码",
                    minlength: "验证码长度为4位"
                }
            },
            highlight: function (e) {
                $(e).closest('.ui-form-item').addClass('ui-form-item-error');
            },
            success: function (e) {
                $(e).closest('.ui-form-item').removeClass('ui-form-item-error');
            },
            submitHandler: function (form) {
                $("#bindEmail").text("重新发送").prev().text("请前往" + $("input[name='email']").val() + "验证绑定邮箱");
                email.resetForm();
                form.reset();
            },
            invalidHandler: function (form) {
            }
        });
        $("#bindEmailDialog").dialog({
            autoOpen: false,
            modal: true,
            dialogClass: "J-dialog",
            width: 600,
            height: "auto",
            buttons: [
                {
                    html: "取消",
                    "class": "btn  btn-white   btn-round btn-minier",
                    click: function (e) {
                        $("#bindEmailDialog").dialog('close');
                    }
                },
                {
                    html: "发送",
                    "class": "btn btn-orange btn-round btn-minier",
                    click: function (e) {
                        if (!$('#emailForm').valid()) {
                            e.preventDefault();
                        } else {
                            $("#emailForm").submit();
                            $("#bindEmailDialog").dialog('close');
                        }
                    }
                }
            ]
        });
        //表单验证
        $("#pwdForm").validate({
           /* onkeyup: function (element, event) {
                //去除左侧空格
                var value = this.elementValue(element).replace(/^\s+/g, "");
                $(element).val(value);
            },*/
            onfocusout: function (element, event) {
                var value = this.elementValue(element).replace(/\s|\xA0/g,"");
                $(element).val(value);
            },
            errorPlacement: function (error, element) {
                error.replaceAll(element.next().find("span"));
            },
            rules: {
                primaryPassword: {
                    required: true,
                    minlength: 8
                },
                password: {
                    required: true,
                    minlength: 8
                },
                rePassword: {
                    required: true,
                    equalTo: "#password_input"
                }
            },
            messages: {
                primaryPassword: {
                    required: "请输入初始密码",
                    minlength: 8
                },
                password: {
                    required: "请输入新密码",
                    minlength: "密码至少八位",
                },
                rePassword: {
                    required: "请重复输入新密码",
                    equalTo: "输入新密码不一致"
                }
            },
            highlight: function (e) {
                $(e).closest('.ui-form-item').addClass('ui-form-item-error');
            },
            success: function (e) {
                $(e).closest('.ui-form-item').removeClass('ui-form-item-error');
            },
            submitHandler: function (form) {

            },
            invalidHandler: function (form) {
            }
        });

        $("#accountForm").validate({
           /* onkeyup: function (element, event) {
                //去除左侧空格
                var value = this.elementValue(element).replace(/^\s+/g, "");
                $(element).val(value);
            },*/
            onfocusout: function (element, event) {
                var value = this.elementValue(element).replace(/\s|\xA0/g,"");
                $(element).val(value);
            },
            errorPlacement: function (error, element) {
                error.replaceAll(element.next().find("span"));
            },
            rules: {
                userName: {
                    required: true
                }
            },
            messages: {
                userName: {
                    required: "请输入姓名"
                }
            },
            highlight: function (e) {
                $(e).closest('.ui-form-item').addClass('ui-form-item-error');
            },
            success: function (e) {
                $(e).closest('.ui-form-item').removeClass('ui-form-item-error');
            },
            submitHandler: function (form) {

            },
            invalidHandler: function (form) {
            }
        });

        $("#changeAvatar").click(function () {
            $("#avatarDialog").dialog('open');
        });
        $("#avatarDialog").dialog({
            autoOpen: false,
            modal: true,
            dialogClass: "J-dialog",
            width: 700,
            height: "auto",
            buttons: [
                {
                    html: "上传",
                    "class": "btn btn-orange btn-round btn-minier",
                    click: function (e) {
                        var img = $("#avatarImg").attr("src");
                        console.log(img);
                        $("#avatarDialog").dialog('close');
                    }
                }
            ]
        });
    })
</script>
<script>
    $(window).load(function () {
        var options =
            {
                thumbBox: '.thumbBox',
                spinner: '.spinner',
                imgSrc: ''
            }
        var cropper = $('.imageBox').cropbox(options);
        var img = "";
        $('#upload-file').on('change', function () {
            var reader = new FileReader();
            reader.onload = function (e) {
                options.imgSrc = e.target.result;
                cropper = $('.imageBox').cropbox(options);
            }
            reader.readAsDataURL(this.files[0]);
            this.files = null;
        })
        $('#btnCrop').on('click', function () {
            var img = cropper.getDataURL();
            img = cropper.getDataURL();
            $('.cropped').html('');
            $('.cropped').append('<img id="avatarImg" src="' + img + '"    style="width:180px;margin-top:4px;border-radius:180px;box-shadow:0px 0px 12px #7E7E7E;"><p>180px*180px</p>');

        })

        $('#btnZoomIn').on('click', function () {
            cropper.zoomIn();
        })
        $('#btnZoomOut').on('click', function () {
            cropper.zoomOut();
        })
    });


</script>
<script>
    //表单验证
    $("#J-findPwdForm").validate({
        /*onkeyup: function (element, event) {
            //去除左侧空格
            var value = this.elementValue(element).replace(/^\s+/g, "");
            $(element).val(value);
        },*/
        onfocusout: function (element, event) {
            var value = this.elementValue(element).replace(/\s|\xA0/g,"");
            $(element).val(value);
        },
        errorPlacement: function (error, element) {
            error.insertAfter(element.next().find("i"));
        },
        rules: {
            logonId: {
                required: true
            },
            picCheckCode: {
                required: true,
                minlength: 4
            }
        },
        messages: {
            logonId: {
                required: "请输入手机号"
            },
            picCheckCode: {
                required: "请输入验证码",
                minlength: "验证码长度为4位"
            }
        },
        highlight: function (e) {
            $(e).closest('.ui-form-item').addClass('ui-form-item-error');
        },
        success: function (e) {
            $(e).closest('.ui-form-item').removeClass('ui-form-item-error');
        },
        submitHandler: function (form) {
            window.location = './'
        },
        invalidHandler: function (form) {
        }
    });
</script>
</html>